<template>
    <div class="main-content"
         :style='{"padding":"30px 240px 30px 30px","backgroundAttachment":"fixed","background":"url(http://codegen.caihongy.cn/20220722/ce24de35df6b4d969295f2d03f97d326.png)","backgroundSize":"cover","backgroundPosition":"center center","backgroundRepeat":"no-repeat","height":"calc(100vh - 120px)"}'>
        <!-- 列表页 -->
        <template v-if="showFlag">
            <el-form class="center-form-pv" :style='{"margin":"0 0 20px"}' :inline="true" :model="searchForm">
                <el-row :style='{"display":"block"}'>
                    <div :style='{"margin":"0 10px 0 0","display":"inline-block"}'>
                        <label :style='{"margin":"0 10px 0 0","color":"#000","display":"inline-block","lineHeight":"40px","fontSize":"14px","fontWeight":"500","height":"40px"}'
                               class="item-label">用户名</label>
                        <el-input v-model="searchForm.username" placeholder="用户名" clearable></el-input>
                    </div>
                    <el-button
                            :style='{"border":"5px solid #CFD5F8","cursor":"pointer","padding":"0 24px","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"40px"}'
                            type="success" @click="search()">查询
                    </el-button>
                </el-row>

                <el-row :style='{"margin":"20px 0","display":"flex"}'>
                    <el-button
                            :style='{"border":"5px solid #CFD5F8","cursor":"pointer","padding":"0 24px","margin":"0 10px 0 0","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"40px"}'
                            v-if="isAuth('messages','新增')" type="success" @click="addOrUpdateHandler()">新增
                    </el-button>
                    <el-button
                            :style='{"border":"5px solid #CFD5F8","cursor":"pointer","padding":"0 24px","margin":"0 10px 0 0","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"40px"}'
                            v-if="isAuth('messages','删除')" :disabled="dataListSelections.length <= 0" type="danger"
                            @click="deleteHandler()">删除
                    </el-button>


                </el-row>
            </el-form>

            <!-- <div> -->
            <el-table class="tables"
                      :stripe='false'
                      :style='{"width":"100%","padding":"0","borderColor":"#eee","borderStyle":"solid","borderWidth":"1px 0 0 1px","background":"#fff"}'
                      v-if="isAuth('messages','查看')"
                      :data="dataList"
                      v-loading="dataListLoading"
                      @selection-change="selectionChangeHandler">
                <el-table-column :resizable='true' type="selection" align="center" width="50"></el-table-column>
                <el-table-column :resizable='true' :sortable='false' label="索引" type="index" width="50"/>
                <el-table-column :resizable='true' :sortable='false'
                                 prop="username"
                                 label="用户名">
                    <template slot-scope="scope">
                        {{scope.row.username}}
                    </template>
                </el-table-column>
                <el-table-column :resizable='true' :sortable='false'
                                 prop="content"
                                 label="留言内容">
                    <template slot-scope="scope">
                        {{scope.row.content}}
                    </template>
                </el-table-column>
                <el-table-column :resizable='true' :sortable='false' prop="cpicture" width="200" label="留言图片">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cpicture">
                            <img v-if="scope.row.cpicture.substring(0,4)=='http'"
                                 :src="scope.row.cpicture.split(',')[0]" width="100" height="100">
                            <img v-else :src="$base.url+scope.row.cpicture.split(',')[0]" width="100" height="100">
                        </div>
                        <div v-else>无图片</div>
                    </template>
                </el-table-column>
                <el-table-column :resizable='true' :sortable='false'
                                 prop="reply"
                                 label="回复内容">
                    <template slot-scope="scope">
                        {{scope.row.reply}}
                    </template>
                </el-table-column>
                <el-table-column :resizable='true' :sortable='false' prop="rpicture" width="200" label="回复图片">
                    <template slot-scope="scope">
                        <div v-if="scope.row.rpicture">
                            <img v-if="scope.row.rpicture.substring(0,4)=='http'"
                                 :src="scope.row.rpicture.split(',')[0]" width="100" height="100">
                            <img v-else :src="$base.url+scope.row.rpicture.split(',')[0]" width="100" height="100">
                        </div>
                        <div v-else>无图片</div>
                    </template>
                </el-table-column>
                <el-table-column width="300" label="操作">
                    <template slot-scope="scope">
                        <el-button
                                :style='{"border":"5px solid#CFD5F8","cursor":"pointer","padding":"0 24px","margin":"0 10px 4px 0","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"32px"}'
                                v-if=" isAuth('messages','查看')" type="success" size="mini"
                                @click="addOrUpdateHandler(scope.row.id,'info')">查看详情
                        </el-button>
                        <el-button
                                :style='{"border":"5px solid #CFD5F8","cursor":"pointer","padding":"0 24px","margin":"0 10px 4px 0","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"32px"}'
                                v-if=" isAuth('messages','修改')" type="primary" size="mini"
                                @click="addOrUpdateHandler(scope.row.id)">修改
                        </el-button>


                        <el-button
                                :style='{"border":"5px solid #CFD5F8","cursor":"pointer","padding":"0 24px","margin":"0 10px 4px 0","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"32px"}'
                                v-if="isAuth('messages','回复')" type="primary" size="mini"
                                @click="addOrUpdateHandler(scope.row.id)">回复
                        </el-button>
                        <el-button
                                :style='{"border":"5px solid #CFD5F8","cursor":"pointer","padding":"0 24px","margin":"0 10px 4px 0","outline":"none","color":"#000","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"32px"}'
                                v-if="isAuth('messages','删除') " type="danger" size="mini"
                                @click="deleteHandler(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    background
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pageSize"
                    :layout="layouts.join()"
                    :total="totalPage"
                    prev-text="<"
                    next-text=">"
                    :hide-on-single-page="true"
                    :style='{"width":"100%","padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","fontWeight":"500"}'
            ></el-pagination>
            <!-- </div> -->
        </template>

        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
        <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>


    </div>
</template>

<script>
    import axios from 'axios'
    import AddOrUpdate from "./add-or-update";

    export default {
        data() {
            return {
                searchForm: {
                    key: ""
                },
                form: {},
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                showFlag: true,
                sfshVisiable: false,
                shForm: {},
                chartVisiable: false,
                chartVisiable1: false,
                chartVisiable2: false,
                chartVisiable3: false,
                chartVisiable4: false,
                chartVisiable5: false,
                addOrUpdateFlag: false,
                layouts: ["total", "prev", "pager", "next", "sizes", "jumper"],

            };
        },
        created() {
            this.init();
            this.getDataList();
            this.contentStyleChange()
        },
        mounted() {
        },
        filters: {
            htmlfilter: function (val) {
                return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
            }
        },
        components: {
            AddOrUpdate,
        },
        methods: {

            contentStyleChange() {
                this.contentPageStyleChange()
            },
            // 分页
            contentPageStyleChange() {
                let arr = []

                // if(this.contents.pageTotal) arr.push('total')
                // if(this.contents.pageSizes) arr.push('sizes')
                // if(this.contents.pagePrevNext){
                //   arr.push('prev')
                //   if(this.contents.pagePager) arr.push('pager')
                //   arr.push('next')
                // }
                // if(this.contents.pageJumper) arr.push('jumper')
                // this.layouts = arr.join()
                // this.contents.pageEachNum = 10
            },


            init() {
            },
            search() {
                this.pageIndex = 1;
                this.getDataList();
            },

            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let params = {
                    page: this.pageIndex,
                    limit: this.pageSize,
                    sort: 'id',
                    order: 'desc',
                }
                if (this.searchForm.username != '' && this.searchForm.username != undefined) {
                    params['username'] = '%' + this.searchForm.username + '%'
                }
                this.$http({
                    url: "messages/page",
                    method: "get",
                    params: params
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.list;
                        this.totalPage = data.data.total;
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            // 多选
            selectionChangeHandler(val) {
                this.dataListSelections = val;
            },
            // 添加/修改
            addOrUpdateHandler(id, type) {
                this.showFlag = false;
                this.addOrUpdateFlag = true;
                this.crossAddOrUpdateFlag = false;
                if (type != 'info') {
                    type = 'else';
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, type);
                });
            },
            // 下载
            download(file) {
                window.open(`${file}`)
            },
            // 删除
            deleteHandler(id) {
                var ids = id
                    ? [Number(id)]
                    : this.dataListSelections.map(item => {
                        return Number(item.id);
                    });
                this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$http({
                        url: "messages/delete",
                        method: "post",
                        data: ids
                    }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.search();
                                }
                            });
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                });
            },


        }

    };
</script>
<style lang="scss" scoped>

    .center-form-pv {
        .el-date-editor.el-input {
            width: auto;
        }
    }

    .el-input {
        width: auto;
    }

    // form
    .center-form-pv .el-input /deep/ .el-input__inner {
        border: 0;
        padding: 0 12px;
        color: #000;
        font-size: 14px;
        border-color: #FFD563;
        border-radius: 0;
        box-shadow: 0 0 0px rgba(64, 158, 255, .5);
        outline: none;
        background: #CFD5F8;
        width: 170px;
        border-width: 0 4px;
        border-style: solid;
        height: 40px;
    }

    .center-form-pv .el-select /deep/ .el-input__inner {
        border: 0;
        padding: 0 10px;
        color: #000;
        font-size: 14px;
        border-color: #FFD563;
        border-radius: 0;
        box-shadow: 0 0 0px rgba(64, 158, 255, .5);
        outline: none;
        background: #CFD5F8;
        width: 170px;
        border-width: 0 4px;
        border-style: solid;
        height: 40px;
    }

    .center-form-pv .el-date-editor /deep/ .el-input__inner {
        border: 0;
        padding: 0 10px 0 30px;
        color: #000;
        font-size: 14px;
        border-color: #FFD563;
        border-radius: 0;
        box-shadow: 0 0 0px rgba(64, 158, 255, .5);
        outline: none;
        background: #CFD5F8;
        width: 170px;
        border-width: 0 4px;
        border-style: solid;
        height: 40px;
    }

    // table
    .el-table /deep/ .el-table__header-wrapper thead {
        color: #999;
        font-weight: 500;
        width: 100%;
    }

    .el-table /deep/ .el-table__header-wrapper thead tr {
        background: #fff;
    }

    .el-table /deep/ .el-table__header-wrapper thead tr th {
        padding: 12px 0;
        background: #CFD5F8;
        border-color: #eee;
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: center;
    }

    .el-table /deep/ .el-table__header-wrapper thead tr th .cell {
        padding: 0 10px;
        word-wrap: normal;
        color: #000;
        word-break: break-all;
        white-space: normal;
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        line-height: 24px;
        position: relative;
        text-overflow: ellipsis;
    }


    .el-table /deep/ .el-table__body-wrapper tbody {
        width: 100%;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr {
        background: #fff;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td {
        padding: 12px 0;
        color: #666;
        background: #fff;
        border-color: #eee;
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: center;
    }


    .el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
        padding: 12px 0;
        color: #333;
        background: rgba(207, 213, 248, .5);
        border-color: #eee;
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: center;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td {
        padding: 12px 0;
        color: #666;
        background: #fff;
        border-color: #eee;
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: center;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
        padding: 0 10px;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
        line-height: 24px;
        text-overflow: ellipsis;
    }

    // pagination
    .main-content .el-pagination /deep/ .el-pagination__total {
        margin: 0 10px 0 0;
        color: #666;
        font-weight: 400;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-prev {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-next {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-prev:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-next:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pager {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    .main-content .el-pagination /deep/ .el-pager .number {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #666;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #f4f4f5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pager .number:hover {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #409EFF;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #CFD5F8;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pager .number.active {
        cursor: default;
        padding: 0 4px;
        margin: 0 5px;
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #CFD5F8;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
        margin: 0 5px;
        width: 100px;
        position: relative;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 25px 0 8px;
        color: #606266;
        display: inline-block;
        font-size: 13px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
        cursor: pointer;
        color: #C0C4CC;
        width: 25px;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .main-content .el-pagination /deep/ .el-pagination__jump {
        margin: 0 0 0 24px;
        color: #606266;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__jump .el-input {
        border-radius: 3px;
        padding: 0 2px;
        margin: 0 2px;
        display: inline-block;
        width: 50px;
        font-size: 14px;
        line-height: 18px;
        position: relative;
        text-align: center;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 3px;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }
</style>
